<template>
	<view class="automobile">
		<!-- 汽车用品 -->
		<u-navbar leftIconSize="34rpx" autoBack :placeholder="true" bgColor="#ffffff">
			<view class="" slot="center">
				<text class="c-000 pf-sc fw-600" style="font-size: 34rpx;">汽车用品</text>
			</view>
		</u-navbar>

		<view
			class="set-data-container w-750 b-box d-flex flex-c ali-i-c just-s po-re"
			style="background: #FAFAFA;"
			:style="{ height: containerHeight }"
		>
			<view class="w-750 d-flex flex-r ali-i-c just-c bg-ff" style="height: 88rpx;">
				<view style="width: 690rpx;height: 68rpx;">
					<u-input
						v-model="search"
						placeholder="搜索"
						border="surround"
						inputAlign="left"
						shape="circle"
						:customStyle="{ background: '#F5F5F5;' }"
						@confirm="getShoplists"
					>
						<view slot="prefix">
							<image
								:src="require('../static/search.png')"
								style="width: 30rpx;height: 30rpx;"
							></image>
						</view>
					</u-input>
				</view>
			</view>
			<!--  -->
			<view class="w-750 bg-fa b-box ">
				<view v-if="TabList.length > 0" class=" b-box bg-fa" style="height: 92rpx;width: 750rpx;">
					<!-- <template> -->
					<u-tabs
						:list="TabList"
						lineColor="#FFD300"
						@click="tabsClick"
						:scrollable="true"
						:inactiveStyle="{
							color: '#666666',
							fontSize: '32rpx',
							fontWeight: '400',
							fontFamily: 'PingFang SC'
						}"
						:activeStyle="{
							color: '#262626',
							fontSize: '32rpx',
							fontWeight: '500',
							fontFamily: 'PingFang SC'
						}"
						lineWidth="36rpx"
						:lineBottom="'100rpx'"
						:itemStyle="{
							height: '88rpx',
							padding: '0 10rpx',
							backgroundColor: 'rgba(255,255,255,0)'
						}"
						:current="TabCurrent"
						lineHeight="6rpx"
					></u-tabs>
					<!-- </template> -->
				</view>
			</view>
			<!-- list -->
			<!-- swiper tabs标签 -->
			<view style="margin: 0 auto;width: 700rpx;">
				<swiper
					@animationfinish="swiperChange"
					v-if="listHeight"
					:style="{ height: listHeight, width: '100%' }"
					width="100%"
					:skip-hidden-item-layout="false"
					bgColor="#F7F7F7"
					:radius="0"
					:current="TabCurrent"
					easing-function="easeInOutCubic"
					:disable-touch="false"
					@change="tabsClick"
				>
					<swiper-item v-for="item in TabList" :key="item.id">
						<scroll-view
							:scroll-top="scroolTop"
							:style="{ height: listHeight }"
							:scroll-y="true"
							v-if="listHeight"
							:refresher-enabled="false"
							:refresher-threshold="45"
							enable-flex="true"
							refresher-default-style="black"
							:refresher-triggered="refresher_triggered0"
							refresher-background="#f7f7f7"
							@refresherrefresh="refresherrefresh"
							:lower-threshold="50"
							@scrolltolower="scrolltolower(item)"
							style="display: flex;flex-wrap: wrap;"
						>
							<view v-for="(item, index) of dataLists" :key="index" style="width: 50%;">
								<shopp-card :CustomIndex="index" :staffList="item" />
								<!-- 空状态 -->
								<view class=" d-flex flex-c ali-i-c just-c" v-if="dataLists.length == 0">
									<text style="font: 500 30rpx PingFang SC;color:#B3B3B3 ;margin-top: 30rpx;">
										数据为空
									</text>
								</view>
							</view>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script>
import { carshop } from '@/common/api.js';
import { _containerHeight, _addUnit, _rpxTpx } from '@/utils/GetSys.js';
import uInput from '../components/uview-ui/components/u-input/u-input';
import Unavbar from '../components/uview-ui/components/u-navbar/u-navbar';
// import Utabs from '../components/uview-ui/components/u-tabs/u-tabs';
import shoppCard from '../components/shoppCard/shoppCard';
export default {
	components: {
		'u-input': uInput,
		'u-navbar': Unavbar,
		'shopp-card': shoppCard
		// 'u-tabs':Utabs
	},
	data() {
		return {
			scroolTop: 0,
			containerHeight: '',
			listHeight: '',
			TabList: [],
			search: '',
			page: 1,
			TabCurrent: 0, //当前选中标签的索引
			refresher_triggered0: false, //下拉刷新
			refresher_triggered1: false,
			refresher_triggered2: false,
			refresher_triggered3: false,
			refresher_triggered4: false,
			refresher_triggered0_: false,
			refresher_triggered1_: false,
			refresher_triggered2_: false,
			refresher_triggered3_: false,
			refresher_triggered4_: false,
			dataList: {
				dataList0: [],
				dataList1: [],
				dataList2: [],
				dataList3: [],
				dataList4: [],
				requestStatus0: false,
				requestStatus1: false,
				requestStatus2: false,
				requestStatus3: false,
				requestStatus4: false
			},
			itemIndex: 0,
			dataLists: [],
			FalseData: {
				dataList0: [],
				dataList1: [],
				dataList2: [],
				dataList3: [],
				dataList4: []
			},
			sureIndex: 1
		};
	},

	methods: {
		catchtouchmove() {
			return false;
		},
		// GoReadDetails(data) {
		// 	//跳转到商品详情
		// 	uni.navigateTo({
		// 		url: '/userModelA/userC/GoodsDetails/GoodsDetails'
		// 	});
		// },
		ClearRefre_() {
			for (let index = 0; index < 4; index++) {
				this.$set(this, `refresher_triggered${index}_`, false);
			}
		},
		refresherrefresh() {
			uni.hideLoading();
		},
		// 上拉加载
		scrolltolower(id) {
			if (this.sureIndex == 0) {
				this.sureIndex = 1;
			}
			/**
			 * request
			 * */
			let params = {
				search: this.search,
				cateid: this.sureIndex,
				istj: 1,
				page: (this.page += 1)
			};
			console.log(params, 'params');
			carshop(params).then(res => {
				if (res.data.data.goods.length > 0) {
					this.dataLists = this.dataLists.concat(res.data.data.goods);
				} else {
					uni.showToast({
						title: '没有更多内容了',
						icon: 'none'
					});
				}
			});
		},
		swiperChange(index) {
			this.page = 1;
			//一级 窗口滑动动画结束后
			this.scroolTop = 0;
			this.TabCurrent = parseInt(index.detail.current);
			this.sureIndex = this.TabList[this.TabCurrent].id;
			this.ClearRefre_();
			/**
			 * request
			 * */
			let list = this.dataList;
		},

		tabsClick(item) {
			this.scroolTop = 0;
			this.page = 1;
			this.search = '';
			this.sureIndex = item.id;
			if (item.type == 'change') {
				this.TabList.forEach((itm, index) => {
					let cur = item.detail.current;
					if (cur == index) {
						let id = itm.id;
						this.searchId = itm.id;
						let params = {
							search: this.search,
							cateid: id,
							istj: 1,
							page: 1
						};
						carshop(params).then(res => {
							if (res.data.code == 1) {
								if (res.data.data.goods.length > 0) {
									this.dataLists = res.data.data.goods;
								} else {
									this.dataLists = [];
									uni.showToast({
										title: '没有更多内容了',
										icon: 'none'
									});
								}
							}
						});
					}
				});
			} else {
				this.itemIndex = item.id || item.index;
				this.ClearRefre_();
				let params = {
					search: this.search,
					cateid: item.id,
					istj: 1,
					page: 1
				};
				carshop(params).then(res => {
					if (res.data.code == 1) {
						if (res.data.data.goods.length > 0) {
							this.dataLists = res.data.data.goods;
						} else {
							this.dataLists = [];
							uni.showToast({
								title: '没有更多内容了',
								icon: 'none'
							});
						}
					}
				});
			}
		},
		//获取导航栏的数据
		getTablist() {
			let params = {
				page: 1
			};
			carshop(params).then(res => {
				if (res.data.code == 1) {
					this.TabList = res.data.data.catlist;
				}
			});
		},

		getShoplists() {
			this.page = 1;
			let params = {
				search: this.search,
				cateid: this.sureIndex,
				istj: 1,
				page: this.page
			};
			console.log(params, 'params');
			carshop(params).then(res => {
				if (res.data.data.goods.length > 0) {
					this.dataLists = res.data.data.goods;
				} else {
					uni.showToast({
						title: '未在当前商品分类中查询到您想要的商品',
						icon: 'none'
					});
					this.dataLists = [];
					this.search = '';
					this.page = 1;
				}
			});
		},
		getShoplist() {
			let params = {
				search: this.search,
				cateid: 1,
				istj: 1,
				page: 1
			};
			carshop(params).then(res => {
				if (res.data.code === 1) {
					this.dataLists = res.data.data.goods;
				}
			});
		}
	},
	onLoad(v) {
		this.containerHeight = _containerHeight();
		this.listHeight = _addUnit(parseInt(this.containerHeight) - _rpxTpx('186rpx'), 'px');
		// this.ReauestMethod();
		this.getTablist();
		let id = v.id;
		if (id == 3 || id == 4 || id == 5) {
			this.itemIndex = id;
			this.ClearRefre_();
			let params = {
				search: this.search,
				cateid: id,
				istj: 1,
				page: 1
			};
			carshop(params).then(res => {
				if (res.data.code == 1) {
					if (res.data.data.goods.length > 0) {
						this.dataLists = res.data.data.goods;
					} else {
						this.dataLists = [];
						uni.showToast({
							title: '没有更多内容了',
							icon: 'none'
						});
					}
				}
			});
			this.TabCurrent = id - 2;
		} else {
			this.getShoplist();
		}
	}
};
</script>

<style lang="scss">
.automobile {
}
</style>
